<template >
	<div class="contain-report">
		<div class="report-title">实验室管理要求公告</div>
		<div class="report-search">
			<div></div>
			<div>
				<el-select placeholder="请选择实验室" v-model="form.laboratoryId" style="width: 300px;margin-right: 20px" @change="getStudentNotice" clearable @close="form.laboratoryId = null">
					<el-option v-for="item in laboratoryList" :key="item.id" :label="item.laboratoryName" :value="item.id"></el-option>
				</el-select>
				<el-input style="width: 300px"
						  placeholder="请输入"
						  v-model="form.name"
						  clearable
						  @clear="getStudentNotice"
				>
					<i slot="suffix" class="el-input__icon el-icon-search" style="font-size: 20px;cursor: pointer" @click="getStudentNotice"></i>
				</el-input>
			</div>
		</div>
		
		<div class="report-list" v-for="item in tableList" :key="item.id">
			<div class="list-box">
				<h3 style="margin-bottom: 10px">{{item.name}}</h3>
				<span style="color: #999">{{item.message}}</span>
			</div>
			<div class="right">
				<div class="right-date">
					<span style="margin-bottom: 10px">上传时间:</span>
					<span>{{item.createTime}}</span>
				</div>
				<div class="right-content">
					<span style="margin-bottom: 10px">实验室:</span>
					<span>{{item.laboratoryName}}</span>
				</div>
				<div class="btns">
					<el-button type="text" @click="openSee(item)">查 看</el-button>
				</div>
			</div>
		</div>
		
		<div class="report-page">
			<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="1"
					:page-sizes="[5]"
					:page-size="5"
					layout="sizes, prev, pager, next, jumper"
					:total="total">
			</el-pagination>
		</div>
		<el-dialog
				:show-close="false"
				:visible.sync="seeDialog"
				width="40%"
		>
			<div class="dialog-box">
				<div class="box-top">查看试验管理要求</div>
				<div class="box-body">
					<el-form label-width="80px">
						<el-form-item label="要求名称:">
							<el-input placeholder="请输入要求名称" disabled v-model="seeForm.name"></el-input>
						</el-form-item>
						<el-form-item label="要求内容:">
							<el-input type="textarea" v-model="seeForm.message" disabled placeholder="请输入要求内容(可选)" :rows="2"></el-input>
						</el-form-item>
						<el-form-item label="实验室:">
							<el-select placeholder="请选择实验室" disabled v-model="seeForm.laboratoryId" style="width: 100%">
								<el-option
										v-for="item in laboratoryList"
										:key="item.id"
										:label="item.laboratoryName"
										:value="item.id"
								>
								</el-option>
							</el-select>
						</el-form-item>
					</el-form>
					<div class="form-btn">
						<el-button size="small" @click="seeDialog = false">关 闭</el-button>
					</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template >

<script >
	import { laboratoryList,studentNotice } from "../../api/notice";

    export default {
        name: "guidanceResources",
		data(){
            return{
                form:{
                    laboratoryId: null,
                    name: "",
                    pageIndex: 1,
                    pageSize: 5
				},
                laboratoryList:[],
				tableList:[],
				total:null,
                seeForm:{},
                seeDialog:false,
			}
		},
		mounted() {
            this.getLaboratoryList()
			this.getStudentNotice()
        },
        methods: {
            async getLaboratoryList(){
                const { data } = await laboratoryList()
                console.log(data)
				if (data.code === 200){
				    this.laboratoryList = data.data
				}
			},
			async getStudentNotice(){
                const { data } = await studentNotice(this.form)
                console.log('ppp',data)
				if (data.code === 200){
				    this.tableList = data.data.data
					this.total = data.data.total
				}
			},
            handleSizeChange(val) {
                this.form.pageSize = val
                this.getStudentNotice()
            },
            handleCurrentChange(val) {
                this.form.pageIndex = val
                this.getStudentNotice()
            },
            openSee(item){
                console.log(item)
                this.seeForm = item
                this.seeDialog = true
            },
        },
    }
</script >

<style scoped lang="less">
	.contain-report {
		position: relative;
		width: 100%;
		height: 100%;
		padding: 20px;
		box-sizing: border-box;
		.report-title {
			font-size: 22px;
			color: #333;
		}
		.dialog-box{
			width: 100%;
			min-height: 50vh;
			border-radius: 5px;
			overflow: hidden;
			.box-top{
				width: 100%;
				height: 10vh;
				background-image: linear-gradient(to left, #3591d4 0%, #50b3da 50%, #85f9e6 100%);
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26px;
				color: #fff;
			}
			.box-body{
				width: 100%;
				height: 80%;
				padding:5% 10%;
				box-sizing: border-box;
				background-color: #ffffff;
				/deep/.el-input__inner{
					border: none;
					background-color: #ecedef;
				}
				/deep/.el-textarea__inner{
					border: none;
					background-color: #ecedef;
				}
				.form-btn{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.file-list{
					margin-top: 20px;
					width: 100%;
					.file-box{
						margin-top: 10px;
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.left{
							width: 40%;
							display: flex;
							align-items: center;
							justify-content: space-between;
						}
					}
				}
			}
		}
		.report-search{
			width: 100%;
			margin: 30px 0;
			padding: 0 5%;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			/deep/.el-input__inner{
				border-radius: 20px;
			}
		}
		.report-list{
			width: 100%;
			margin: 20px 0;
			background-color: #fff;
			border-radius: 20px;
			box-shadow: 0 0 5px 0 #ccc;
			padding: 20px;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.list-box{
				width: 50%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: flex-start;
			}
			.right{
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.right-content{
					width: 10%;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: space-around;
					color: #999;
				}
				.right-date{
					width: fit-content;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: space-around;
					color: #999;
				}
				.btns{
					width: 40%;
					padding: 0 5%;
					box-sizing: border-box;
					display: flex;
					justify-content: center;
				}
			}
			
		}
		.report-page{
			position: absolute;
			bottom: 10px;
			left: 50%;
			width: 100%;
			transform: translateX(-50%);
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style >
